import React from 'react';
import { inject, observer } from 'mobx-react';
import { TabPage, RouteLayout } from 'weaver-mobile-page';
// import { toJS } from 'mobx';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
import { Bubble, Tools, Toast, Icon, ActivityIndicator } from 'weaver-mobile';
import SuperviseList from './SuperviseList'
import Follow from '../follow/index';
import TagManage from '../follow/tagManage';
import TagEdit from '../follow/tagEdit';
import * as EmSDK from '../../util/emSDK';
const getLabel = Tools.getLabel;
const Item = TabPage.Item;
@inject('wfSuperviseStore')
@observer
export default class App extends React.Component {

    constructor(props) {
        super(props);
    }

    componentWillMount() {
        const { location, wfSuperviseStore } = this.props;
        const { pathname = "" } = location;
        const { setState, listAd_All, listAd_Inupervise, listAd_Supervised,listAd_Attention } = wfSuperviseStore;
        if (pathname) {
            let nowTab = 0;
            let nowListAd = listAd_All;
            switch (pathname) {
                case "/supervise/all":
                    nowTab = 0;
                    nowListAd = listAd_All;
                    setState({ nowTab, nowListAd })
                    break;
                case "/supervise/insupervise":
                    nowTab = 1;
                    nowListAd = listAd_All;
                    setState({ nowTab, listAd_Inupervise })
                    break;
                case "/supervise/supervised":
                    nowTab = 2;
                    nowListAd = listAd_All;
                    setState({ nowTab, listAd_Supervised })
                    break;
                case "/supervise/attention":
                    nowTab = 3;
                    nowListAd = listAd_Attention;
                    setState({ nowTab, nowListAd })
                    break;
            }
        }
    }

    componentWillUpdate(nextProps) {
        const { location, wfSuperviseStore } = nextProps;
        const { pathname = "" } = location;
        const { setState,  listAd_All, listAd_Inupervise, listAd_Supervised,listAd_Attention} = wfSuperviseStore;
        if (pathname) {
            if (pathname.indexOf("/supervise") == 0) {
                EmSDK.controlEmTopNav({ title: getLabel(21218, "流程督办"), showCloseButton: false })
            }
            let nowTab = 0;
            let nowListAd = listAd_All;
            switch (pathname) {
                case "/supervise/all":
                    nowTab = 0;
                    nowListAd = listAd_All;
                    setState({ nowTab, nowListAd })
                    break;
                case "/supervise/insupervise":
                    nowTab = 1;
                    nowListAd = listAd_Inupervise;
                    setState({ nowTab, nowListAd })
                    break;
                case "/supervise/supervised":
                    nowTab = 2;
                    nowListAd = listAd_Supervised;
                    setState({ nowTab, nowListAd })
                    break;
                case "/supervise/attention":
                    nowTab = 3;
                    nowListAd = listAd_Attention;
                    setState({ nowTab, nowListAd })
                    break;
            }
        }
    }

    handleSelect = (node) => {
        const type = node.props.value;
        const { setState } = this.props.wfSuperviseStore;
        setState({
            visible: false,
            showCheck: true,
            currentBtn:type,
        });
    }

    handleVisibleChange = (visible) => {
        const { setState } = this.props.wfSuperviseStore;
        setState({ visible });
    };

    changeTab = (obj, index) => {
        // console.log(obj)
        const { changeTab } = this.props.wfSuperviseStore;
        const url = '/supervise/' + obj.path;
        this.props.history.push(url);
        changeTab(obj);
    }



    render() {
        const { tabs, visible, isShowLoading, nowTab,nowListAd } = this.props.wfSuperviseStore;

        const nowStore=nowListAd.route;

        const tabProps = {
            onChange: this.changeTab,
            page: nowTab,
        };
        const popoverProps = {
            visible,
            overlay: [
            <Item key="batchSupervise" value="batchSupervise" data-seed="logId">{getLabel(84561, "批量督办")}</Item>,
            <Item key="batchAttention" value="batchAttention" data-seed="logId">{getLabel(503955, '批量关注')}</Item>,
        ],
            onSelect: this.handleSelect,
            onVisibleChange: this.handleVisibleChange,
        };

        return (
            <div className="wf-supervise">
                <TabPage
                    className="tab-page-example"
                    span={[11, 2]}
                    tabs={tabs}
                    tabProps={tabProps}
                    defaultTabBarProps={{ page: 3 }}
                    popover
                    popoverProps={popoverProps}
                />
                <Switch>
                    <Route path="/supervise/all" component={SuperviseList} />
                    <Route path="/supervise/insupervise" component={SuperviseList} />
                    <Route path="/supervise/supervised" component={SuperviseList} />
                    <Route path="/supervise/attention" component={SuperviseList} />
                    <Redirect exact path="/supervise" to={{ pathname: '/supervise/all' }} />
                </Switch>
                <Route
                    key={'follow'}
                    path={nowStore+'/follow'}
                    render={() => (
                        <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout wm-demo-route-layout-page"
                            >
                                <Follow store={this.props.wfSuperviseStore} type='supervise'/>
                            </div>
                        </RouteLayout>
                    )}
                />
                <Route
                    key={'tagManage'}
                    path={nowStore+'/follow/tagManage'}
                    render={() => (
                        <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout wm-demo-route-layout-page"
                            >
                                <TagManage store={this.props.wfSuperviseStore} type='supervise'/>
                            </div>
                        </RouteLayout>
                    )}
                />
                <Route
                    key={'tagEdit'}
                    path={nowStore+'/follow/tagManage/tagEdit'}
                    render={() => (
                        <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout wm-demo-route-layout-page"
                            >
                                <TagEdit store={this.props.wfSuperviseStore} type='supervise'/>
                            </div>
                        </RouteLayout>
                    )}
                />
                {isShowLoading && <ActivityIndicator
                    toast
                    text={getLabel(500408, "加载中...")}
                    animating={isShowLoading}
                />}
            </div>
        );
    }
}